<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        {{ this.pgTitle }}
      </p>

      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->
    <div class="bigbox">
      <!-- 客户信息 --start-->
      <div class="conter_box1" :data="listData">
        <p>客户信息</p>
        <ul>
          <li>
            <span>客户编号</span>
            <template>
              <el-select
                placeholder="请输入客户编号"
                style="width: 70%"
                v-model="listData.enterpriseNumber"
                @change="GetProMiss($event)"
                value-key="id">
                <el-option
                  v-for="item in clientIdarr"
                  :key="item.key"
                  :label="item.enterpriseNumber"
                  :value="item"
                ></el-option>
              </el-select>
            </template>
          </li>
          <li>
            <span>客户名称</span>
            <el-input style="width: 70%" v-model="listData.enterpriseName" disabled></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input
              placeholder="请输入联系人"
              style="width: 70%"
              v-model="listData.contacts"
              disabled
            ></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input
              placeholder="请输入联系方式"
              style="width: 70%"
              v-model="listData.contactsPhone"
              disabled
            ></el-input>
          </li>
          <li>
            <span>企业地址</span>
            <el-input
              placeholder="请输入企业地址"
              style="width: 70%"
              v-model="listData.adress"
              disabled
            ></el-input>
          </li>
        </ul>
      </div>
      <!-- 客户信息 --end-->

      <!-- 合同信息 --start-->
      <div class="conter_box2" :data="listData">
        <p>合同信息</p>
        <ul>
          <li>
            <span>合同编号</span>
            <el-input
              placeholder="请输入合同编号"
              style="width: 70%"
              v-model="listData.contractNumber"
            ></el-input>
          </li>
          <li>
            <span>合同信息</span>
            <el-input placeholder="请选择合同信息" style="width: 70%" v-model="listData.leixing"></el-input>
            <!--            <el-select-->
            <!--              placeholder="请选择合同类型"-->
            <!--              style="width: 70%"-->
            <!--              v-model="listData.leixing"-->
            <!--            >-->
            <!--              <el-option-->
            <!--                v-for="item in leixingarr"-->
            <!--                :key="item.key"-->
            <!--                :label="item.value"-->
            <!--                :value="item.value"-->
            <!--              ></el-option>-->
            <!--            </el-select>-->
          </li>
          <li>
            <span>币别</span>
            <el-select
              placeholder="请选择币种"
              style="width: 70%"
              v-model="listData.bibie"
            >
              <el-option
                v-for="item in bibiearr"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>生效日期</span>
            <el-date-picker
              v-model="listData.shengxiaoTime"
              type="date"
              placeholder="选择日期"
              style="width: 70%"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </li>
          <li>
            <span>失效日期</span>
            <el-date-picker
              v-model="listData.shixiaoTime"
              type="date"
              placeholder="选择日期"
              style="width: 70%"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </li>
        </ul>
      </div>
      <!-- 产品信息 --end-->
      <!-- 产品价格 start-->
      <div class="conter_box3">
        <p>产品信息</p>
        <template>
          <el-table :data="productList" style="width: 100%" max-height="310px">
            <el-table-column label="序号" align="center" type="index" width="140"/>
            <el-table-column label="产品图号" align="center">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.productTuhao"
                  @change="GetProMess(scope.$index, $event)"
                  value-key="id"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="item in productLists"
                    :key="item.id"
                    :label="item.productTuhao"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.productName" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.danwei" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column label="含税单价 (元)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="税率" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.shuilv"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="生效日期" align="center">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.createonTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  style="width: 98%;"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="addDomain"
                >新增
                </el-button
                >
                <el-button
                  type="danger"
                  @click="resetForm(scope)"
                  v-if="scope.$index !== 0"
                  size="small"
                >删除
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- 产品价格 end-->
    </div>

    <!-- 底部按钮 --start-->
    <div class="bottom">
      <el-button type="primary" size="medium" @click="add()">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      // input: "",
      // value: [{}],
      // tableData: [{}],
      listData: {
        // productList: [{}],
        id: "",
        clientId: "",
        enterpriseName: "",
        contractNumber: "",
        leixing: "",
        status: "",
        bibie: "",
        shengxiaoTime: "",
        shixiaoTime: "",
        contacts: "",
        contactsPhone: "",
        adress: "",
        enterpriseNumber: "",
      },
      productList: [{}],
      productLists: [],
      clientIdarr: [],
      leixingarr: [
        {key: 1, value: "销售订单"},
        {key: 2, value: "销售合同"},
      ],
      value: "",
      statusarr1: [
        {key: 1, value: "待审核"},
        {key: 2, value: "驳回"},
        {key: 3, value: "已成功"},
        {key: 4, value: "开启"},
        {key: 5, value: "关闭"},
      ],
      bibiearr: [
        {key: 1, value: "现金"},
        {key: 2, value: "支付宝支付"},
        {key: 3, value: "微信支付"},
        {key: 4, value: "网银"},
      ],
      edit: "",
      pgTitle: "新增合同",
      Mark: 0,
    };
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.userName = JSON.parse(localStorage.getItem("message")).Name;
    this.edit = this.$route.query.edit;
    this.getCai();
    this.getquan();
  },
  methods: {
    GetProMess(ind, e) {
      this.productList[ind].productTuhao = e.productTuhao
      this.productList[ind].id = e.id;
      this.productList[ind].productName = e.productName;
      this.productList[ind].danwei = e.danwei;
      this.productList[ind].status = e.status;
    },
    GetProMiss(e) {
      this.listData.enterpriseNumber = e.enterpriseNumber;
      this.listData.enterpriseName = e.enterpriseName;
      this.listData.contacts = e.contacts;
      this.listData.contactsPhone = e.contactsPhone;
      this.listData.adress = e.adress;
      this.listData.id = e.id;
    },
    // 编辑与详情页获取数据
    getDat(id) {
      axios(
        "/JX_java/sales/contract/getContractDetails?ccId=" +
        this.$route.query.id
      ).then((res) => {
        let result = res.data.data;
        this.listData = result;
      });
    },
    // 获取供应商 产品
    getCai() {
      axios("/JX_java/common/getAllSupplierProduct").then((res) => {
        let result = res.data.data;
        this.productLists = result;
      });
    },
    // 获取所有客户资料
    getquan() {
      axios(
        "/JX_java/common/getClientMessageList?userId=" + this.userId
      ).then((res) => {
        let result = res.data.data;
        this.clientIdarr = result;
      });
    },
    // 新增订单
    add() {
      const arr = {
        "clientName": this.listData.enterpriseName,
        "clientNumber": this.listData.enterpriseNumber,
        "contractNumber": this.listData.contractNumber,
        "createonTime": "",
        "createonUserid": this.userId,
        "createonUsername": this.userName,
        "leixing": this.listData.leixing,
        "bibie": this.listData.bibie,
        "clientId": this.listData.id,
        "shengxiaoTime": this.listData.shengxiaoTime,
        "shixiaoTime": this.listData.shixiaoTime,
        "status": this.listData.status,
        "tableBiaoshi": 0,
        "clientMessage": {
          "adress": "",
          "contacts": "",
          "contactsPhone": "",
          "createonTime": "",
          "createonUserid": 0,
          "debtAllmoney": 0,
          "debtExpire": 0,
          "debtNotDue": 0,
          "enterpriseName": "",
          "enterpriseNumber": "",
          "hezuoStatus": "",
          "hezuoYear": "",
          "id": 0,
          "jop": "",
          "kaipiaoContacts": "",
          "kaipiaoContactsphone": "",
          "kaipiaoDanwei": "",
          "kaipiaoKaihuaccount": "",
          "kaipiaoKaihuhang": "",
          "nashui": "",
          "orderMoney": 0,
          "status": "",
          "xinyongMoney": 0
        },


        "productList": [],
      };
      this.productList.forEach(e => {
        const product = {
          "clientId": 0,
          "contractId": 0,
          "createonTime": "",
          "danwei": "",
          "id": 0,
          "kucunShangxian": 0,
          "kucunXiaxian": 0,
          "price": 0,
          "productName": "",
          "productTuhao": "",
          "shenghemessageId": 0,
          "shuilv": "",
          "status": 0,
          "xuhao": 0
        }
        product.productTuhao = e.productTuhao;
        product.productName = e.productName;
        product.danwei = e.danwei
        product.price = e.price
        product.shuilv = e.shuilv
        product.createonTime = e.createonTime
        product.status = e.status
        arr.productList.push(product);
      })
      axios
        .post("/JX_java/sales/contract/addSalesHetong?", arr)
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },


    //新增采购-------动态添加
    addDomain() {
      const list = {
        productName: "",
      };
      this.productList.push(list);
    },
    //新增采购-------动态删除
    resetForm(e) {
      console.log(e);
      this.productList.splice(e.$index, 1);
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.bigbox {
  width: 98%;
  margin-left: 25px;
}

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.conter_box1 {
  background: $white;
  height: 250px;
  width: 98%;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 20px;
  }

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // color: #909399;
    li {
      width: 33%;
      font-size: 16px;
      margin-bottom: 10px;
      text-align: center;
      margin-top: 10px;

      span {
        display: inline-block;
        width: 25%;
      }

    }
  }
}

.conter_box2 {
  background: $white;
  // height: 100px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 20px;
  }

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // color: #909399;
    li {
      width: 33%;
      font-size: 16px;
      margin-bottom: 10px;
      margin-top: 10px;
      text-align: center;

      span {
        display: inline-block;
        width: 25%;
      }
    }
  }
}

.conter_box3 {
  background: $white;
  // min-height: 160px;
  //max-height: 220px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 20px;
  }
}

.bottom {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
  // background: $white;
  position: relative;

  p {
    width: 20%;
    // height: 50px;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
